<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>e数码商城</title>
    <link rel="stylesheet" href="./css/icofont.css">
    <link rel="shortcut icon" href="./images/logo.jpg" type="images/ico">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        .product-details {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none;
        }

        .product-details button {
            margin-top: 10px;
        }

        .cart-count {
            background-color: red;
            color: white;
            border-radius: 50%;
            padding: 2px 6px;
            font-size: 12px;
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
</head>

<body>
<!-- 顶部 开始 -->
<div class="top">
    <div class="head">
        <div class="headleft">
            <a href=""> e数码官网 </a>
            <span>|</span>
            <a href=""> 手机商城 </a>
            <span>|</span>
            <a href=""> 云服务 </a>
            <span>|</span>
            <a href=""> 资质证照 </a>
            <span>|</span>
            <a href=""> 协议规则 </a>
            <span>|</span>
            <a href=""> 下载app </a>
            <span>|</span>
            <a href=""> Select Location </a>
        </div>
        <div class="headright">
            <div class="info">
                <a href="user-center.html"> 登录 </a>
                <span>|</span>
                <a href=""> 消息通知 </a>
            </div>
            <div class="shopcart">
                <a href="cart.html"><i class="iconfont icon-gouwuche"></i>购物车（<span id="cart-count">0</span>）</a>
                <div class="shopcart-down" id="shopcart-down">
                    <div class="msg" id="cart-msg">
                        购物车中还没有商品，赶紧选购吧！
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 顶部 结束 -->
    <!-- 搜索栏 开始 -->
    <div class="undertop">
        <div class="category">
            <div class="logo"><a href="https://www.mi.com/" title="e数码官网"><img src="./images/logo.jpg"></a></div>
            <ul class="sort">
                <li class="blank"></li>
                <li>手机</li>
                <li>电视</li>
                <li>笔记本</li>
                <li>平板</li>
                <li>路由器 配件</li>
                <li>耳机 音响</li>
                <li>社区</li>
            </ul>
            <ul class="slidedown">
                <li>
                    <a class="obj">
                        <img src="./images/手机/小米Mx300 .jpg" alt="">
                        <p>小米Mx300</p>
                        <p class="color">1799元起</p>
                    </a>
                    <a class="obj">
                        <img src="./images/手机/Redmi K70.jpg" alt="">
                        <p>Redmi K70</p>
                        <p class="color">6499元起</p>
                    </a>
                    <a class="obj">
                        <img src="./images/手机/vivo Y37 Pro.png" alt="">
                        <p>vivo Y37 Pro</p>
                        <p class="color">2799元起</p>
                    </a>
                    <a class="obj">
                        <img src="./images/手机/真我13 Pro+.jpg" alt="">
                        <p>真我13 Pro+.</p>
                        <p class="color">3999元起</p>
                    </a>
                    <a class="obj">
                        <img src="./images/手机/Y300 Pro.jpg" alt="">
                        <p>vivo Y300 Pro</p>
                        <p class="color">3999元起</p>
                    </a>
                </li>
                <li>
                    <a class="obj">
                        <img src="./images/电视/小米壁画电视.jpg" alt="">
                        <p>小米壁画电视</p>
                        <p class="color">7999元</p>
                    </a>
                    <a class="obj">
                        <img src="./images/电视/雷鸟 鹤6 Pro 55S585C Pro.jpg" alt="">
                        <p>雷鸟 鹤6 Pro 55S585C Pro</p>
                        <p class="color">3499元</p>
                    </a>                   
                    <a class="obj">
                        <img src="./images/电视/TCL65Q10K Pro.jpg" alt="">
                        <p>TCL65Q10K Pro</p>
                        <p class="color">8599元</p>
                    </a> 
                    <a class="obj">
                        <img src="./images/电视/Vidda海信 X65 Ultra.jpg" alt="">
                        <p>Vidda海信 X65 Ultra</p>
                        <p class="color">4599元</p>
                    </a>
                    <a class="obj">
                        <img src="./images/电视/海信65E8N Pro.jpg" alt="">
                        <p>海信65E8N Pro</p>
                        <p class="color">2799元</p>
                    </a>
                </li>
                <li>
                    <a class="obj">
                        <img src="./images/电脑/荣耀笔记本 X16 Plus 2025.jpg" alt="">
                        <p>荣耀笔记本 X16 Plus</p>
                        <p class="color">8999元</p>
                    </a>
                    <a class="obj">
                        <img src="./images/电脑/小米笔记本独显版 15‘’6.jpg" alt="">
                        <p>小米笔记本独显版 15‘’6</p>
                        <p class="color">4999元起</p>
                    </a>
                    <a class="obj">
                        <img src="./images/电脑/荣耀MagicBook Pro 16.jpg" alt="">
                        <p>荣耀MagicBook Pro 16</p>
                        <p class="color">6399元起</p>
                    </a>
                    <a class="obj">
                        <img src="./images/电脑/华为MateBook D16.jpg" alt="">
                        <p>华为MateBook D16</p>
                        <p class="color">3699元起</p>
                    </a>
                    <a class="obj">
                        <img src="./images//电脑/联想拯救者Y7000P.jpg" alt="">
                        <p>联想拯救者Y7000P</p>
                        <p class="color">8299元起</p>
                    </a>
                </li>
                <li>
                    <a class="obj">
                        <img src="./images/平板/Apple 11 英寸 iPad Air第六代.jpg" alt="">
                        <p>Apple 11 英寸 iPad Air第六代</p>
                        <p class="color">1499元起</p>
                    </a>
                    <a class="obj">
                        <img src="./images/平板/HUAWEI MatePad Air.jpg" alt="">
                        <p>HUAWEI MatePad</p>
                        <p class="color">2999元起</p>
                    </a>
                    <a class="obj">
                        <img src="./images/平板/华为MatePad SE.jpg" alt="">
                        <p>华为MatePad SE</p>
                        <p class="color">1099元起</p>
                    </a>
                    <a class="obj">
                        <img src="./images/平板/Xiaomi Pad7.jpg" alt="">
                        <p>Xiaomi Pad7</p>
                        <p class="color">3499元起</p>
                    </a>
                    <a class="obj">
                        <img src="./images/平板/OPPO Pad 3 Pro.jpg" alt="">
                        <p>OPPO Pad 3 Pro</p>
                        <p class="color">2099元起</p>
                    </a>
                </li>
                <li>
                    <a class="obj">
                        <img src="./images/路由器 配件/Anker 65W氮化镓充电器.jpg" alt="">
                        <p>Anker 65W氮化镓充电器</p>
                        <p class="color">69元</p>
                    </a>
                    <a class="obj">
                        <img src="./images/路由器 配件/三星T7 移动固态硬盘.jpg" alt="">
                        <p>三星T7 移动固态硬盘</p>
                        <p class="color">249元</p>
                    </a>
                    <a class="obj">
                        <img src="./images/路由器 配件/罗技G Pro X机械键盘.jpg" alt="">
                        <p>罗技G Pro X机械键盘</p>
                        <p class="color">699元</p>
                    </a>
                    <a class="obj">
                        <img src="./images/路由器 配件/小米路由器Mesh.jpg" alt="">
                        <p>小米路由器Mesh</p>
                        <p class="color">279元</p>
                    </a>
                    <a class="obj">
                        <img src="./images/路由器 配件/luyouqi1.jpg" alt="">
                        <p>小米路由器4A 千兆版</p>
                        <p class="color">99元</p>
                    </a>
                    <a class="obj">
                        <img src="./images/路由器 配件/luyouqi2.jpg" alt="">
                        <p>查看全部</p>
                        <p>小米路由器</p>
                    </a>
                </li>
                <li>
                    <a class="obj">
                        <img src="./images/音响 耳机/Bose QuietComfort 45 降噪耳机.jpg" alt="">
                        <p>Bose QuietComfort 45</p>
                        <p class="color">369元</p>
                    </a>
                    <a class="obj">
                        <img src="./images/音响 耳机/Bose SoundLink Revolve+.jpg" alt="">
                        <p>Bose SoundLink Revolve+</p>
                        <p class="color">249元</p>
                    </a>
                    <a class="obj">
                        <img src="./images/音响 耳机/iQOO TWS 2.jpg" alt="">
                        <p>iQOO TWS 2</p>
                        <p class="color">399元</p>
                    </a>
                    <a class="obj">
                        <img src="./images/音响 耳机/JBL Flip 5 便携蓝牙音箱.jpg" alt="">
                        <p>JBL Flip 5 便携蓝牙音箱</p>
                        <p class="color">1279元</p>
                    </a>
                    <a class="obj">
                        <img src="./images/音响 耳机/vivo TWS 4.jpg" alt="">
                        <p>vivo TWS 4</p>
                        <p class="color">199元</p>
                    </a>
                    <a class="obj">
                        <img src="./images/音响 耳机/真我Buds T01.jpg" alt="">
                        <p>真我Buds T01</p>
                        <p class="color">109元</p>
                    </a>
                </li>
            </ul>
            <form class="so">
                <input class="search" placeholder=""></input>
                <ul class="search-down">
                    <li><a href="">手机换新</a></li>
                    <li><a href="">空调</a></li>
                    <li><a href="">Redmi K70 Pro</a></li>
                    <li><a href="">洗衣机</a></li>
                    <li><a href="">电视</a></li>
                    <li><a href="">耳机</a></li>
                    <li><a href="">充电宝</a></li>
                    <li><a href="">路由器</a></li>
                </ul>
                <button class="searpic">
                    <a href=""><i class="iconfont icon-sousuo"></i></a>
                </button>
            </form>
        </div>
    </div>
    <!-- 搜索栏 结束 -->
<!-- 快捷键 开始 -->
<ul class="shortcut">
    <li><a href="user-center.html"><i class="iconfont icon-gerenzhongxin"></i>
            <p>个人中心</p>
        </a></li>
    <li><a href=""><i class="iconfont icon-editor2"></i>
            <p>售后服务</p>
        </a></li>
    <li><a href=""><i class="iconfont icon-icon-rengongkefu"></i>
            <p>人工客服</p>
        </a></li>
    <li><a href="cart.html"><i class="iconfont icon-gouwuche"></i>
            <p>购物车</p>
        </a></li>
    <li>
        <div><i class="iconfont icon-huidaodingbu"></i>
            <p>回顶部</p>
        </div>
    </li>
</ul>
<!-- 快捷键 结束 -->
    <!-- banner 开始 -->
    <div class="banner">
        <div class="bannercon">
            <div class="imgs">
                <img src="./images/lbt1.jpg" alt="加载失败" class="imgActive">
                <img src="./images/lbt2.jpg" alt="加载失败">
                <img src="./images/lbt3.jpg" alt="加载失败">
                <img src="./images/lbt4.jpg" alt="加载失败">
                <img src="./images/lbt5.jpg" alt="加载失败">
                <img src="./images/lbt6.jpg" alt="加载失败">
            </div>
            <ul class="banner-left">
                <li>
                    <div><span>手机</span><i class="iconfont icon-arrow-right"></i></div>
                </li>
                <li>
                    <div><span>电视</span><i class="iconfont icon-arrow-right"></i></div>
                </li>
                <li>
                    <div><span>笔记本 平板</span><i class="iconfont icon-arrow-right"></i></div>
                </li>
                <li>
                    <div><span>耳机 音箱</span><i class="iconfont icon-arrow-right"></i></div>
                </li>
                <li>
                    <div><span>配件 路由器</span><i class="iconfont icon-arrow-right"></i></div>
                </li>
                <li>
                    <div><span>摄影 数码</span><i class="iconfont icon-arrow-right"></i></div>
                </li>
            </ul>
            <ul class="leftExtra">
                <li class="">
                    <a href="">
                        <img src="./images/手机/iPhone 14 Pro.jpg" alt="">
                        <p>iPhone 14 Pro</p>
                    </a>
                    <a href="">
                        <img src="./images/手机/iPhone 15 Pro Max.jpg" alt="">
                        <p>iPhone 15 Pro Max</p>
                    </a>
                    <a href="">
                        <img src="./images/手机/vivo X100s Pro.jpg" alt="">
                        <p>iPhone 14 Pro</p>
                    </a>
                    <a href="">
                        <img src="./images/手机/Y300 Pro.jpg" alt="">
                        <p>realme GT 2 Pro</p>
                    </a>
                    <a href="">
                        <img src="./images/手机/iQOO 12 Pro.jpg" alt="">
                        <p>华为P40 Pro</p>
                    </a>
                    <a href="">
                        <img src="./images/手机/OPPO Find X5.jpg" alt="">
                        <p>三星Galaxy S22</p>
                    </a>
                    <a href="">
                        <img src="./images/手机/真我13 Pro+.jpg" alt="">
                        <p>vivo Y37 Pro</p>
                    </a>
                    <a href="">
                        <img src="./images/手机/一加 10 Pro.jpg" alt="">
                        <p>iPhone 14 Pro</p>
                    </a>
                    <a href="">
                        <img src="./images/手机/realme GT 2 Pro.jpg" alt="">
                        <p>realme GT 2 Pro</p>
                    </a>
                    <a href="">
                        <img src="./images/手机/Redmi K70.jpg" alt="">
                        <p>华为P40 Pro</p>
                    </a>
                    <a href="">
                        <img src="./images/手机/荣耀 Magic 4.jpg" alt="">
                        <p>三星Galaxy S22</p>
                    </a>
                    <a href="">
                        <img src="./images/手机/华为P40 Pro 旗舰手机.jpg" alt="">
                        <p>vivo Y37 Pro</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/电视/TCL65Q10K Pro.jpg" alt="">
                        <p>TCL65Q10K Pro</p>
                    </a>
                    <a href="">
                        <img src="./images/电视/Vidda海信 X65 Ultra.jpg" alt="">
                        <p>Vidda海信 X65 Ultra</p>
                    </a>
                    <a href="">
                        <img src="./images/电视/雷鸟 鹤6 Pro 55S585C Pro.jpg" alt="">
                        <p>雷鸟 鹤6 Pro</p>
                    </a>
                    <a href="">
                        <img src="./images/电视/索尼XR-X90L.jpg" alt="">
                        <p>索尼XR-X90L</p>
                    </a>
                    <a href="">
                        <img src="./images/电视/海信65E8N Pro.jpg" alt="">
                        <p>海信65E8N Pro</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/平板/Apple 11 英寸 iPad Air第六代.jpg" alt="">
                        <p>Apple 11 英寸Air</p>
                    </a>
                    <a href="">
                        <img src="./images/平板/OPPO Pad 3 Pro.jpg" alt="">
                        <p>ROG Zephyrus G14</p>
                    </a>
                    <a href="">
                        <img src="./images/平板/Xiaomi Pad7.jpg" alt="">
                        <p>Xiaomi Pad7</p>
                    </a>
                    <a href="">
                        <img src="./images/平板/华为MatePad SE.jpg" alt="">
                        <p>华为MatePad SE</p>
                    </a>
                    <a href="">
                        <img src="./images/电脑/Apple MacBook Pro 笔记本电脑.jpg" alt="">
                        <p>Apple MacBook Pro</p>
                    </a>
                    <a href="">
                        <img src="./images/电脑/华为MateBook D16.jpg" alt="">
                        <p>MateBook D16</p>
                    </a>
                    <a href="">
                        <img src="./images/电脑/华硕ROG Zephyrus G14.jpg" alt="">
                        <p>ROG Zephyrus G14</p>
                    </a>
                    <a href="">
                        <img src="./images/电脑/华硕天选5 Pro.jpg" alt="">
                        <p>华硕天选5 Pro</p>
                    </a>
                    <a href="">
                        <img src="./images/电脑/荣耀笔记本 X16 Plus 2025.jpg" alt="">
                        <p>荣耀笔记本 X16 Plus 2025</p>
                    </a>
                    <a href="">
                        <img src="./images/电脑/小新Pro 16.jpg" alt="">
                        <p>小新Pro 16</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/音响 耳机/Bose QuietComfort 45 降噪耳机.jpg" alt="">
                        <p>Bose QuietComfort</p>
                    </a>
                    <a href="">
                        <img src="./images/音响 耳机/Bose SoundLink Revolve+.jpg" alt="">
                        <p>Bose SoundLink</p>
                    </a>
                    <a href="">
                        <img src="./images/音响 耳机/iQOO TWS 2.jpg" alt="">
                        <p>iQOO TWS 2</p>
                    </a>
                    <a href="">
                        <img src="./images/音响 耳机/JBL Flip 5 便携蓝牙音箱.jpg" alt="">
                        <p>JBL Flip 5</p>
                    </a>
                    <a href="">
                        <img src="./images/音响 耳机/vivo TWS 4.jpg" alt="">
                        <p>vivo TWS 4</p>
                    </a>
                    <a href="">
                        <img src="./images/音响 耳机/真我 Buds T310.jpg" alt="">
                        <p>真我 Buds T310</p>
                    </a>
                    <a href="">
                        <img src="./images/音响 耳机/索尼无线蓝牙耳机.jpg" alt="">
                        <p>索尼无线蓝牙耳机</p>
                    </a>
                    <a href="">
                        <img src="./images/音响 耳机/真我Buds T01.jpg" alt="">
                        <p>真我Buds T01</p>
                    </a>
                <li>
                    <a href="">
                        <img src="./images/路由器 配件/Anker 65W氮化镓充电器.jpg" alt="">
                        <p>Anker 65W氮化镓充电器</p>
                    </a>
                    <a href="">
                        <img src="./images/路由器 配件/luyouqi1.jpg" alt="">
                        <p>小米路由器4A Pro</p>
                    </a>
                    <a href="">
                        <img src="./images/路由器 配件/三星T7 移动固态硬盘.jpg" alt="">
                        <p>三星T7 移动固态硬盘</p>
                    </a>
                    <a href="">
                        <img src="./images/路由器 配件/小米路由器Mesh.jpg" alt="">
                        <p>小米路由器Mesh</p>
                    </a>
                    <a href="">
                        <img src="./images/路由器 配件/罗技G Pro X机械键盘.jpg" alt="">
                        <p>罗技G Pro X机械键盘</p>
                    </a>
                    <a href="">
                        <img src="./images/路由器 配件/罗技G502 HERO 高性能游戏鼠标.jpg" alt="">
                        <p>罗技G502 HERO键盘</p>
                    </a>
                    <a href="">
                        <img src="./images/路由器 配件/雷蛇黑寡妇蜘蛛V3 机械键盘.jpg" alt="">
                        <p>雷蛇黑寡妇蜘蛛V3</p>
                    </a>
                    <a href="">
                        <img src="./images/路由器 配件/luyouqi2.jpg" alt="">
                        <p>小米路由器4A</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/摄影 智能电子设备/GoPro HERO10 Black 运动相机.jpg" alt="">
                        <p>/GoPro HERO10 Black</p>
                    </a>
                    <a href="">
                        <img src="./images/摄影 智能电子设备/GoPro HERO9 Black.jpg" alt="">
                        <p>GoPro HERO9 Black</p>
                    </a>
                    <a href="">
                        <img src="./images/摄影 智能电子设备/Insta360 ONE X2.jpg" alt="">
                        <p>Insta360 ONE X2</p>
                    </a>
                    <a href="">
                        <img src="./images/摄影 智能电子设备/Kindle Paperwhite 电子书阅读器.jpg" alt="">
                        <p>Kindle Paperwhite</p>
                    </a>
                    <a href="">
                        <img src="./images/摄影 智能电子设备/大疆御 Mavic Air 2 无人机.jpg" alt="">
                        <p>Mavic Air 2 无人机</p>
                    </a>
                    <a href="">
                        <img src="./images/摄影 智能电子设备/SonyZV-E10L.jpg" alt="">
                        <p>SonyZV-E10L</p>
                    </a>
                    <a href="">
                        <img src="./images/摄影 智能电子设备/大疆 DJI Action 4.jpg" alt="">
                        <p>DJI Action 4</p>
                    </a>
                    <a href="">
                        <img src="./images/摄影 智能电子设备/佳能500D.jpg" alt="">
                        <p>佳能500D</p>
                    </a>
                    <a href="">
                        <img src="./images/摄影 智能电子设备/富士 instax mini 12.jpg" alt="">
                        <p>instax mini 12</p>
                    </a>
                    <a href="">
                        <img src="./images/摄影 智能电子设备/索尼PlayStation 5 游戏主机.jpg" alt="">
                        <p>PlayStation 5</p>
                    </a>
                </li>
            </ul>
            <div class="larrow"><i class="iconfont icon-arrow-left"></i>
            </div>
            <div class="rarrow"><i class="iconfont icon-arrow-right"></i>
            </div>
            <ol class="scroll">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>
    <!-- banner 结束 -->
    <div class="line">
        <div class="img">
            <a href="https://www.mi.com/shop/buy/detail?product_id=19288" target="_blank">
                <img src="./images/news2.jpg" alt="加载失败">
            </a>
        </div>
    </div>
<!-- 手机 开始-->
<div class="phone">
    <div class="title">
        <h2>手机</h2>
        <p class="pmore"><a href="mobile-products.html">查看更多<i class="iconfont icon-youjiantou"></i></a></p>
    </div>
    <div class="content actCon">
        <div class="con-left">
            <a href=""><img src="./images/phone1.jpg" alt="加载失败"></a>
        </div>
        <ul class="con-right">
            <li>
                <a href="">
                    <img src="images/手机/iPhone 14 Pro.jpg" alt="加载失败">
                    <h3>iPhone 14 Pro</h3>
                    <p class="intro">性能旋风，席卷而来</p>
                    <div class="price">
                        <p>1899元起<s><span>1999元</span></s></p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/手机/iPhone 15 Pro Max.jpg" alt="加载失败">
                    <h3>iPhone 15 Pro Max</h3>
                    <p class="intro">全新A17芯片，卓越性能</p>
                    <div class="price">
                        <p>2999元起</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/手机/OPPO Find X5.jpg" alt="加载失败">
                    <h3>OPPO Find X5</h3>
                    <p class="intro">哈苏影像系统，摄影新体验</p>
                    <div class="price">
                        <p>6499元起</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/手机/realme GT 2 Pro.jpg" alt="加载失败">
                    <h3>realme GT 2 Pro</h3>
                    <p class="intro">第三代骁龙8，性能飞跃</p>
                    <div class="price">
                        <p>2999元起<s><span>3299元</span></s></p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/手机/vivo X100s Pro.jpg" alt="加载失败">
                    <h3>vivo X100s Pro</h3>
                    <p class="intro">第二代骁龙8，旗舰性能</p>
                    <div class="price">
                        <p>2199元起<s><span>2499元</span></s></p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/手机/一加 10 Pro.jpg" alt="加载失败">
                    <h3>一加 10 Pro</h3>
                    <p class="intro">新一代旗舰，性能卓越</p>
                    <div class="price">
                        <p>1799元起</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/手机/vivo X200.jpg" alt="加载失败">
                    <h3>vivo X200</h3>
                    <p class="intro">徕卡Summilux可变光圈镜头，影像新高度</p>
                    <div class="price">
                        <p>4599元起</p>
                    </div>
                </a>
            </li>
            <li class="right-last">
                <a href="">
                    <div class="item">
                        <div class="itext">
                            <h3>三星Galaxy S22</h3>
                            <div class="price">
                                <p>6299元</p>
                            </div>
                        </div>
                        <div class="ipic"><img src="./images/手机/三星Galaxy S22.jpg" alt="加载失败"></div>
                    </div>
                </a>
                <a href="phone.html">
                    <div class="more">
                        <div class="mtext">
                            <p>浏览更多</p><small>手机</small>
                        </div>
                        <div class="micon"><i class="iconfont icon-you"></i></div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- 手机 结束-->
    <!-- 影音设备 开始 -->
    <div class="smartwear">
        <div class="title">
            <h2>影音设备</h2>
            <div class="more">
                <a href="">
                    <div>音响</div>
                </a>
                <a href="">
                    <div class="actClass">耳机</div>
                </a>
            </div>
        </div>
        <div class="content actCon">
            <div class="con-left">
                <a href=""><img src="./images/smart1.jpg" alt="加载失败"></a>
            </div>
            <ul class="con-right">
                <li>
                    <a href="">
                        <img src="images/音响 耳机/Redmi Buds 6 活力版.jpg" alt="加载失败">
                        <h3>Redmi Buds 6 活力版</h3>
                        <p class="intro"> 14.2mm超大动圈 | 内置五种调音模式 | 30小时长续航</p>
                        <div class="price">
                            <p>99元</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/音响 耳机/Xiaomi 开放式耳机.jpg" alt="加载失败">
                        <h3>Xiaomi 开放式耳机</h3>
                        <p class="intro"> 舒适稳固佩戴｜超线性发声单元｜独立防漏音系统</p>
                        <div class="price">
                            <p>649元<s><span>699元</span></s></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/音响 耳机/iQOO TWS 2.jpg" alt="加载失败">
                        <h3>Redmi Buds 5 Pro</h3>
                        <p class="intro"> 同轴双单元 旗舰音质 | 52dB/4kHz 旗舰降噪 | 49ms低延迟</p>
                        <div class="price">
                            <p>379元起<s><span>399元</span></s></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/音响 耳机/真我 Buds T310.jpg" alt="加载失败">
                        <h3>Redmi Buds 5</h3>
                        <p class="intro"> 46dB深度降噪丨12.4mm镀钛动圈丨40小时超长续航</p>
                        <div class="price">
                            <p>179元<s><span>199元</span></s></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/音响 耳机/Xiaomi Buds 4 Pro.jpg" alt="加载失败">
                        <h3>Xiaomi Buds 4 Pro</h3>
                        <p class="intro"> 48dB智能动态降噪｜骨声纹通话降噪 | 独立空间音频</p>
                        <div class="price">
                            <p>799元<s><span>1099元</span></s></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/音响 耳机/索尼无线蓝牙耳机.jpg" alt="加载失败">
                        <h3>Redmi Buds 4 Pro</h3>
                        <p class="intro"> 43dB 宽频降噪 | HiFi 高保真音质 | 59ms 游戏低延迟</p>
                        <div class="price">
                            <p>329元起<s><span>399元</span></s></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/音响 耳机/真我Buds T01.jpg" alt="加载失败">
                        <h3>Redmi Buds 4活力版</h3>
                        <p class="intro"> 12mm大动圈 | 28小时长续航 | 触控便捷操作</p>
                        <div class="price">
                            <p>89元<s><span>99元</span></s></p>
                        </div>
                    </a>
                </li>
                <li class="right-last">
                    <a href="">
                        <div class="item">
                            <div class="itext">
                                <h3>Redmi Buds 3</h3>
                                <div class="price">
                                    <p>129元</p>
                                </div>
                            </div>
                            <div class="ipic"><img src="./images/音响 耳机/Redmi Buds 3.jpg" alt="加载失败"></div>
                        </div>
                    </a>
                    <a href="earphone.html">
                        <div class="more">
                            <div class="mtext">
                                <p>浏览更多</p><small>耳机</small>
                            </div>
                            <div class="micon"><i class="iconfont icon-you"></i></div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="content">
            <div class="con-left">
                <a href=""><img src="./images/smart2.jpg" alt="加载失败"></a>
            </div>
            <ul class="con-right">
                <li>
                    <a href="">
                        <img src="images/音响 耳机/Bose SoundLink Revolve+.jpg" alt="加载失败">
                        <h3>小米手环8 Pro 原神定制版</h3>
                        <p class="intro"> 达达利亚主题定制手环 | 主题定制充电底座 | 专属定制礼盒</p>
                        <div class="price">
                            <p>549元</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/音响 耳机/JBL Flip 5 便携蓝牙音箱.jpg" alt="加载失败">
                        <h3>Xiaomi 开放式耳机</h3>
                        <p class="intro"> 舒适稳固佩戴｜超线性发声单元｜独立防漏音系统</p>
                        <div class="price">
                            <p>649元<s><span>699元</span></s></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/音响 耳机/B&O Explore.jpg" alt="加载失败">
                        <h3>Redmi Buds 5 Pro</h3>
                        <p class="intro"> 同轴双单元 旗舰音质 | 52dB/4kHz 旗舰降噪 | 49ms低延迟</p>
                        <div class="price">
                            <p>379元起<s><span>399元</span></s></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/音响 耳机/声擎A2+ Wireless.jpg" alt="加载失败">
                        <h3>Redmi Buds 5</h3>
                        <p class="intro"> 46dB深度降噪丨12.4mm镀钛动圈丨40小时超长续航</p>
                        <div class="price">
                            <p>179元<s><span>199元</span></s></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/音响 耳机/索尼 SRS-XB23.jpg" alt="加载失败">
                        <h3>Xiaomi Buds 4 Pro</h3>
                        <p class="intro"> 48dB智能动态降噪｜骨声纹通话降噪 | 独立空间音频</p>
                        <div class="price">
                            <p>799元<s><span>1099元</span></s></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/音响 耳机/漫步者 R501BT.jpg" alt="加载失败">
                        <h3>Redmi Buds 4 Pro</h3>
                        <p class="intro"> 43dB 宽频降噪 | HiFi 高保真音质 | 59ms 游戏低延迟</p>
                        <div class="price">
                            <p>329元起<s><span>399元</span></s></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/音响 耳机/小度智能音箱mate pro.jpg" alt="加载失败">
                        <h3>Redmi Buds 4活力版</h3>
                        <p class="intro"> 12mm大动圈 | 28小时长续航 | 触控便捷操作</p>
                        <div class="price">
                            <p>89元<s><span>99元</span></s></p>
                        </div>
                    </a>
                </li>
                <li class="right-last">
                    <a href="">
                        <div class="item">
                            <div class="itext">
                                <h3>Redmi Buds 3</h3>
                                <div class="price">
                                    <p>129元</p>
                                </div>
                            </div>
                            <div class="ipic"><img src="./images/音响 耳机/JBL Flip 5 便携蓝牙音箱.jpg" alt="加载失败"></div>
                        </div>
                        </a>
                        <a href="sound.html">
                        <div class="more">
                        <div class="mtext">
                        <p>浏览更多</p><small>音响</small>
                        </div>
                        <div class="micon"><i class="iconfont icon-you"></i></div>
                    </div>
                </a>
                    </li>
                        </ul>
                        </div>
                        
                        </div> 
    <!-- 智能穿戴 结束 -->
<!-- 笔记本|平板 开始 -->
<div class="laptop">
    <div class="title">
        <h2>笔记本 | 平板</h2>
        <div class="more">
            <a href="">
                <div class="actClass">热门</div>
            </a>
        </div>
    </div>
    <div class="content actCon">
        <div class="con-left">
            <a href=""><img src="./images/laptopleft.jpg"alt="加载失败"></a>
        </div>
        <ul class="con-right">
            <li>
                <a href="">
                    <img src="images/平板/Apple 11 英寸 iPad Air第六代.jpg" alt="加载失败">
                    <h3>Apple 11 英寸 iPad Air第六代</h3>
                    <p class="intro">12.1英寸2.5K旗舰机大屏 | 10000mAh超大电池 | Xiaomi HyperOS 流畅体验 | 全套生态配件 | 小米教育中心</p>
                    <div class="price">
                        <p>1499元起</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/平板/HUAWEI MatePad Air.jpg" alt="加载失败">
                    <h3>HUAWEI MatePad Air</h3>
                    <p class="intro">第二代骁龙8 旗舰处理器 | 小米澎湃OS | 12.4" 3K 高清护眼屏 | 120W 小米澎湃秒充 | Wi-Fi 7 高速连接 | 视频会议工具箱 | 支持触控笔、触控键盘</p>
                    <div class="price">
                        <p>2799元起<s><span>2999元</span></s></p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/平板/OPPO Pad 3 Pro.jpg" alt="加载失败">
                    <h3>OPPO Pad 3 Pro</h3>
                    <p class="intro">65W 满血性能｜全新酷睿 Ultra 处理器</p>
                    <div class="price">
                        <p>4899元起<s><span>5299元</span></s></p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/电脑/荣耀笔记本 X16 Plus 2025.jpg" alt="加载失败">
                    <h3>荣耀笔记本 X16 Plus 2025</h3>
                    <p class="intro">70W 狂暴性能｜3.1K 165Hz 高刷高亮屏</p>
                    <div class="price">
                        <p>6399元起</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/电脑/联想拯救者Y7000P.jpg" alt="加载失败">
                    <h3>联想拯救者Y7000P</h3>
                    <p class="intro">47W 满血性能 | 小米澎湃智联 | 旗舰硬核品质</p>
                    <div class="price">
                        <p>3699元起</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/电脑/小米笔记本独显版 15‘’6.jpg" alt="加载失败">
                    <h3>小米笔记本独显版 15‘’6</h3>
                    <p class="intro">47W 满血性能 | 小米澎湃智联 | 旗舰硬核品质</p>
                    <div class="price">
                        <p>4499元起</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/电脑/荣耀MagicBook Art 14 2024.png" alt="加载失败">
                    <h3>荣耀MagicBook Art 14 2024</h3>
                    <p class="intro">高性价比千元平板｜11英寸高刷护眼大屏｜全金属一体机身｜73.2天超长待机</p>
                    <div class="price">
                        <p>849元起<s><span>999元</span></s></p>
                    </div>
                </a>
            </li>
            <li class="right-last">
                <a href="">
                    <div class="item">
                        <div class="itext">
                            <h3>华硕ROG Zephyrus G14</h3>
                            <div class="price">
                                <p>3499元起</p>
                            </div>
                        </div>
                        <div class="ipic"><img src="./images/电脑/华硕ROG Zephyrus G14.jpg" alt="加载失败"></div>
                    </div>
                </a>
                <a href="computer-pad.html">
                    <div class="more">
                        <div class="mtext">
                            <p>浏览更多</p><small>热门</small>
                        </div>
                        <div class="micon"><i class="iconfont icon-you"></i></div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- 家电 开始 -->
<div class="e-appliances">
    <div class="title">
        <h2>家居智能</h2>
        <div class="more">
            <a href="">
                <div class="actClass">家居智能</div>
            </a>
        </div>
    </div>
    <div class="content actCon">
        <ol class="con-left split">
            <li><a class="img1" href=""><img src="./images/电视/小米A系列.jpg" alt="加载失败"></a></li>
            <li><a class="img" href=""><img src="./images/路由器 配件/华硕RT-AX82U路由器pg.jpg" alt="加载失败"></a></li>
        </ol>
        <ul class="con-right">
            <li>
                <a href="">
                    <img src="images/电视/Vidda海信 X65 Ultra.jpg" alt="加载失败">
                    <h3>Vidda海信 X65 Ultra</h3>
                    <p class="intro">12.1英寸2.5K旗舰机大屏 | 10000mAh超大电池 | Xiaomi HyperOS 流畅体验 | 全套生态配件 | 小米教育中心</p>
                    <div class="price">
                        <p>1499元起</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/路由器 配件/小米路由器Mesh.jpg" alt="加载失败">
                    <h3>小米路由器Mesh</h3>
                    <p class="intro">第二代骁龙8 旗舰处理器 | 小米澎湃OS | 12.4" 3K 高清护眼屏 | 120W 小米澎湃秒充 | Wi-Fi 7 高速连接 | 视频会议工具箱 | 支持触控笔、触控键盘</p>
                    <div class="price">
                        <p>2799元起<s><span>2999元</span></s></p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/电视/小米壁画电视.jpg" alt="加载失败">
                    <h3>小米壁画电视</h3>
                    <p class="intro">65W 满血性能｜全新酷睿 Ultra 处理器</p>
                    <div class="price">
                        <p>4899元起<s><span>5299元</span></s></p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/电视/雷鸟 鹤6 Pro 55S585C Pro.jpg" alt="加载失败">
                    <h3>雷鸟 鹤6 Pro 55S585C Pro</h3>
                    <p class="intro">70W 狂暴性能｜3.1K 165Hz 高刷高亮屏</p>
                    <div class="price">
                        <p>6399元起</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/电视/索尼XR-X90L.jpg" alt="加载失败">
                    <h3>索尼XR-X90L</h3>
                    <p class="intro">47W 满血性能 | 小米澎湃智联 | 旗舰硬核品质</p>
                    <div class="price">
                        <p>3699元起</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/电视/TCL65Q10K Pro.jpg" alt="加载失败">
                    <h3>TCL65Q10K Pro</h3>
                    <p class="intro">47W 满血性能 | 小米澎湃智联 | 旗舰硬核品质</p>
                    <div class="price">
                        <p>4499元起</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/电视/海信65E8N Pro.jpg" alt="加载失败">
                    <h3>海信65E8N Pro</h3>
                    <p class="intro">高性价比千元平板｜11英寸高刷护眼大屏｜全金属一体机身｜73.2天超长待机</p>
                    <div class="price">
                        <p>849元起<s><span>999元</span></s></p>
                    </div>
                </a>
            </li>
            <li class="right-last">
                <a href="">
                    <div class="item">
                        <div class="itext">
                            <h3>小米路由器4A Max 14</h3>
                            <div class="price">
                                <p>3499元起</p>
                            </div>
                        </div>
                        <div class="ipic"><img src="./images/路由器 配件/luyouqi1.jpg" alt="加载失败"></div>
                    </div>
                </a>
                <a href="router.html">
                    <div class="more">
                        <div class="mtext">
                            <p>浏览更多</p><small>家居智能</small>
                        </div>
                        <div class="micon"><i class="iconfont icon-you"></i></div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- 家电 结束 -->
<!-- 智能数码 开始 -->
<div class="smartfur">
    <div class="title">
        <h2>智能数码</h2>
        <div class="more">
            <a href="">
                <div class="actClass">智能数码</div>
            </a>
        </div>
    </div>
    <div class="content actCon">
        <ol class="con-left split">
            <li><a class="img1" href=""><img src="./images/摄影 智能电子设备/大疆 DJI Action 4.jpg" alt="加载失败"></a></li>
            <li><a class="img" href=""><img src="./images/大疆无人机宣传图.jpg" alt="加载失败"></a></li>
        </ol>
        <ul class="con-right">
            <li>
                <a href="">
                    <img src="images/摄影 智能电子设备/GoPro HERO10 Black 运动相机.jpg" alt="加载失败">
                    <h3>GoPro HERO10 Black 运动相机</h3>
                    <p class="intro">12.1英寸2.5K旗舰机大屏 | 10000mAh超大电池 | Xiaomi HyperOS 流畅体验 | 全套生态配件 | 小米教育中心</p>
                    <div class="price">
                        <p>1499元起</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/摄影 智能电子设备/GoPro HERO9 Black.jpg" alt="加载失败">
                    <h3>GoPro HERO9 Black</h3>
                    <p class="intro">第二代骁龙8 旗舰处理器 | 小米澎湃OS | 12.4" 3K 高清护眼屏 | 120W 小米澎湃秒充 | Wi-Fi 7 高速连接 | 视频会议工具箱 | 支持触控笔、触控键盘</p>
                    <div class="price">
                        <p>2799元起<s><span>2999元</span></s></p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/摄影 智能电子设备/Insta360 ONE X2.jpg" alt="加载失败">
                    <h3>Insta360 ONE X2</h3>
                    <p class="intro">65W 满血性能｜全新酷睿 Ultra 处理器</p>
                    <div class="price">
                        <p>4899元起<s><span>5299元</span></s></p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/摄影 智能电子设备/佳能EOS M50 Mark II.jpg" alt="加载失败">
                    <h3>佳能EOS M50 Mark II</h3>
                    <p class="intro">70W 狂暴性能｜3.1K 165Hz 高刷高亮屏</p>
                    <div class="price">
                        <p>6399元起</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/摄影 智能电子设备/大疆御 Mavic Air 2 无人机.jpg" alt="加载失败">
                    <h3>大疆御 Mavic Air 2 无人机</h3>
                    <p class="intro">47W 满血性能 | 小米澎湃智联 | 旗舰硬核品质</p>
                    <div class="price">
                        <p>3699元起</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/摄影 智能电子设备/富士 instax mini 12.jpg" alt="加载失败">
                    <h3>富士 instax mini 12</h3>
                    <p class="intro">47W 满血性能 | 小米澎湃智联 | 旗舰硬核品质</p>
                    <div class="price">
                        <p>4499元起</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/摄影 智能电子设备/影石Insta360 GO 3S.jpg" alt="加载失败">
                    <h3>影石Insta360 GO 3S</h3>
                    <p class="intro">高性价比千元平板｜11英寸高刷护眼大屏｜全金属一体机身｜73.2天超长待机</p>
                    <div class="price">
                        <p>849元起<s><span>999元</span></s></p>
                    </div>
                </a>
            </li>
            <li class="right-last">
                <a href="">
                    <div class="item">
                        <div class="itext">
                            <h3>Xiaomi Pad 6 Max 14</h3>
                            <div class="price">
                                <p>3499元起</p>
                            </div>
                        </div>
                        <div class="ipic"><img src="./images/摄影 智能电子设备/Kindle Paperwhite.jpg" alt="加载失败"></div>
                    </div>
                </a>
                <a href="smart.html">
                    <div class="more">
                        <div class="mtext">
                            <p>浏览更多</p><small>智能数码</small>
                        </div>
                        <div class="micon"><i class="iconfont icon-you"></i></div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- 智能数码 结束 -->
    <div class="line">
        <div class="img">
            <a href="https://www.mi.com/shop/buy/detail?product_id=19288" target="_blank">
                <img src="./images/news1.jpg" alt="加载失败">
            </a>
        </div>
    </div>
     <!-- 详细信息区域 -->
     <div id="product-details" class="product-details">
        <h3 id="product-title"></h3>
        <p id="product-desc"></p>
        <p id="product-price"></p>
        <button id="add-to-cart">加入购物车</button>
        <button id="close-details">关闭</button>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
        integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
        crossorigin="anonymous" referrerpolicy="no-referrer">
    </script>
    <script>
        $(document).ready(function () {
            $('.product').on('click', function (e) {
                e.preventDefault(); // 阻止默认行为

                // 获取产品信息
                const productName = $(this).data('name');
                const productPrice = $(this).data('price');
                const productDesc = $(this).data('desc');

                // 更新详情视图内容
                $('#product-title').text(productName);
                $('#product-desc').text(productDesc);
                $('#product-price').text(productPrice);

                // 显示详情视图
                $('#product-details').show();
            });

            // 关闭详情视图
            $('#close-details').on('click', function () {
                $('#product-details').hide();
            });

            // 加入购物车功能
            $('#add-to-cart').on('click', function () {
                alert($('#product-title').text() + ' 已加入购物车');
                $('#product-details').hide(); // 加入购物车后关闭详情视图
            });
        });
        function updateCartCount() {
        let cart = JSON.parse(localStorage.getItem('cart')) || [];
        let totalCount = cart.reduce((sum, item) => sum + item.quantity, 0);
        document.getElementById('cart-count').innerText = totalCount;

        const cartMsg = document.getElementById('cart-msg');
        const shopcartDown = document.getElementById('shopcart-down');
        shopcartDown.innerHTML = '';

        if (cart.length === 0) {
            cartMsg.style.display = 'block';
        } else {
            cartMsg.style.display = 'none';
            cart.forEach(item => {
                const cartItem = document.createElement('div');
                cartItem.className = 'shopcart-item';
                cartItem.innerHTML = `
                    <p>${item.productName}</p>
                    <span>￥${(item.price * item.quantity).toFixed(2)}</span>
                `;
                shopcartDown.appendChild(cartItem);
            });
        }
    }

    // 页面加载完成后立即更新购物车数量和内容
    window.onload = updateCartCount;
    </script>

    <!-- 底部 开始 -->
    <footer>
        <div class="footer-con">
            <ul class="fcon-top">
                <li><i class="iconfont icon-editor2"></i><span>预约维修服务</span></li>
                <li><i class="iconfont icon-7tian"></i><span>7天无理由退货</span></li>
                <li><i class="iconfont icon-15"></i><span>15天免费换货</span></li>
                <li><i class="iconfont icon-liwu"></i><span>满69包邮</span></li>
                <li><i class="iconfont icon-dingwei"></i><span>1100余家售后网点</span></li>
            </ul>
    </footer>
    <!-- 底部 结束 -->
    <div class="slogan">
        <div class="slogan-con"><span>让全球每人都能享受科技带来的美好生活</span></div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
        integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
        crossorigin="anonymous" referrerpolicy="no-referrer">
        </script>
    <script src="./js/index.js"></script>
</body>

</html>